<template>
<div :class="[$style.container]">
  <div :class="[$style.header]">
    <star-nav :data="pageData" :left-expand.sync="leftExpand" :right-expand.sync="rightExpand" :current="current"></star-nav>
  </div>
  <div :class="[$style.body]">
    <div :class="[$style.menu]" v-if="leftExpand">
      <star-menu :current.sync="current"></star-menu>
    </div>
    <div :class="[$style.content]">
      <star-list :data="pageData" :selectedRow.sync="selectedRow"></star-list>
      <empty-data v-if="!pageData.loading && pageData.rows.length < 1">
        <div class="mb-3">还没任何文收藏记录</div>
      </empty-data>
    </div>
    <div :class="[$style.aside]" v-if="rightExpand">
      <doc-panel :data="selectedRow && selectedRow.doc"></doc-panel>
    </div>
  </div>
</div>
</template>

<script lang="ts">

import { PageData, PageQueryParams } from '@/config/page'
import { Vue, Component, Provide, Watch, Ref } from 'vue-property-decorator'
import { clearRecents, getRecentDocs, removeRecents } from '@/api/recent'
import StarList from './components/star-list/index.vue'
import StarNav from './components/star-nav/index.vue'
import StarMenu from './components/star-menu/index.vue'
import DocPanel from '@/views/pages/components/doc-panel/index.vue'
import { download } from '@/api/doc'
import { getStarDocs, unstarByDoc, unstarByGroup, unstarByIds } from '@/api/star'
import { downloadFromUrl } from '@/utils/download'

@Component({
  components: { StarList, StarNav, StarMenu, DocPanel }
})
export default class Star extends Vue {
  pageData: PageData<any> = null as any

  current: any = null

  selectedRow: any = null

  leftExpand = true

  localRightExpand = this.$storage.get('star-doc-panel') !== false

  get rightExpand () {
    return !!this.localRightExpand
  }

  set rightExpand (expand: boolean) {
    this.localRightExpand = !!expand
    this.$storage.set('star-doc-panel', !!expand)
  }

  get checkedRows () {
    const rows = this.pageData.rows
    return rows.filter(v => v.checked)
  }

  @Provide() openDoc (row: any) {
    const doc = row.doc
    const parentId = doc.parentId
    const id = doc.id
    const ownType = doc.ownType
    const ownId = doc.ownId
    const type = doc.type

    const query = type === 'file' ? {
      id: parentId,
      selectedId: id
    } : {
      id: id
    }

    if (ownType === 'enterprise') {
      this.$router.push({ path: `/ent/${ownId}/docs`, query })
    } else {
      this.$router.push({ path: '/docs', query })
    }
  }

  @Provide() editDoc (row: any) {
    const { doc } = row
    window.open(`/editor/${doc.id}`)
  }

  @Provide() previewDoc (row: any) {
    const { doc } = row
    window.open(`/preview/${doc.id}`)
  }

  @Provide() downloadDoc (row: any) {
    const { doc } = row
    if (doc.type === 'dir') {
      this.$message.info('暂不支持文件夹下载')
      return
    }
    download(doc.id).then(url => {
      const response = {
        'content-disposition': `attachment; filename=${encodeURIComponent(doc.name)}`
      }
      this.$oss.signatureUrl(url, { response }).then(url => {
        downloadFromUrl(url)
      })
    })
  }

  @Provide() remove (row?: any) {
    const rows = row ? [row] : this.checkedRows
    unstarByIds(rows.map((v: any) => v.id)).then((data) => {
      this.$message.success(`已移除${data}项`)
      this.pageData.reload(true)
    })
  }

  @Provide() clear () {
    this.$confirm('是否要清空所有收藏，清空后不可恢复？', '清空').then(() => {
      unstarByGroup(this.current?.id).then((data) => {
        this.$message.success('已清空')
        this.pageData.reload(true)
      })
    }).catch(() => {
      // ignore
    })
  }

  @Watch('current') currentChange () {
    if (this.current) {
      this.pageData.load()
    }
    this.selectedRow = null
  }

  created () {
    const loader = (params: PageQueryParams) => {
      const extra = Object.assign({ groupId: this.current?.id }, params)
      return getStarDocs(extra).then(data => {
        data.content.forEach((w: any) => {
          w.checked = false
        })
        return data
      })
    }
    this.pageData = new PageData(loader)
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

$header-height: 40px;

.container {
  height: 100%;
}

.header {
  height: $header-height;
  background-color: $bg-color;
  border-bottom: 1px solid $border-split-color;
  box-sizing: border-box;
}

.body {
  display: flex;
  height: calc(100% - #{$header-height});
}

.menu {
  width: 200px;
  flex: 0 0 auto;
  height: 100%;
  overflow: auto;
}

.content {
  flex: 1 1 auto;
  height: 100%;
  background-color: $bg-color;
  overflow: auto;
  position: relative;
}

.aside {
  width: 300px;
  flex: 0 0 auto;
  height: 100%;
  overflow: auto;
}
</style>
